<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="!todo && !view">发起请假流程</span>
        <span v-else>请假流程审批——{{ this.$route.query.taskName }}</span>
        <el-button v-if="!todo && !view" style="float: right;" type="primary" @click="doSubmit">提交</el-button>
      </div>
      <el-form ref="form" :model="leave" :rules="rules" size="small" label-width="80px">
        <el-form-item label="请假类型" prop="type">
          <el-select v-model="leave.type" placeholder="请选择">
            <el-option
              v-for="item in dicts"
              :key="item.value"
              :label="item.label"
              :disabled="todo || view"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="leave.startTime"
            :disabled="todo || view"
            type="date"
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="leave.endTime"
            :disabled="todo || view"
            type="date"
            placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请假原因" prop="description">
          <el-col :span="12">
            <el-input v-model="leave.description" :rows="10" :disabled="todo || view" type="textarea" placeholder="请输入请假原因" maxlength="100" />
          </el-col>
        </el-form-item>
        <el-form-item v-show="todo && !view" label="审批意见">
          <el-col :span="12">
            <el-input v-model="opinion" :rows="10" maxlength="100" type="textarea"/>
          </el-col>
        </el-form-item>
      </el-form>
      <el-row v-show="todo && !view">
        <el-col :span="4">
          <el-button :loading="flowLoading" type="primary" @click="flowSubmit(true)">同意</el-button>
          <el-button :loading="flowLoading" type="info" @click="flowSubmit(false)">驳回</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-show="todo || view" class="box-card" >
      <div slot="header" class="clearfix">
        <span >流转信息</span>
        <el-steps :active="data.length-1" finish-status="success">
          <el-step v-for="(item,index) in data" :key="index" :title="item.histIns.activityName"></el-step>
        </el-steps>
      </div>
    </el-card>
    <el-card v-show="todo || view" class="box-card" >
      <div slot="header" class="clearfix">
        <span >流转信息</span>
      </div>
      <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;" border>
        <el-table-column prop="histIns.activityName" label="执行环节"/>
        <el-table-column prop="assigneeName" label="执行人"/>
        <el-table-column prop="histIns.startTime" label="开始时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.histIns.startTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="histIns.endTime" label="结束时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.histIns.endTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="提交意见"/>
        <el-table-column prop="durationTime" label="任务历时"/>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </el-card>
  </div>
</template>

<script>
import initDict from '@/mixins/initDict'
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import { saveLeave, findLeave, finishLeave } from '@/api/framework/flow/oaFlow'

export default {
  mixins: [initDict, initData],
  data() {
    return {
      loading: false,
      todo: false,
      view: false,
      flowLoading: false,
      opinion: '',
      leave: {
        type: '',
        startTime: '',
        endTime: '',
        description: ''
      },
      rules: {
        type: [{ required: true, trigger: 'blur', message: '请选择请假类型' }],
        startTime: [{ required: true, trigger: 'blur', message: '请选择开始时间' }],
        endTime: [{ required: true, trigger: 'blur', message: '请选择结束时间' }],
        description: [{ required: true, trigger: 'blur', message: '请输入请假原因' }]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      // 加载数据字典
      this.getDict('leave_type')
      if (this.$route.query.taskId != null) {
        this.todo = true
        this.findLeave(this.$route.query.busId)
        this.init()
      }else  if(this.$route.query.busId!= null) {
        this.view = true
        this.findLeave(this.$route.query.busId)
        this.init()
      }
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = 'flowTask/histoicFlow'
      this.params = { page: this.page, size: this.size,procInsId: this.$route.query.procInsId }
      return true
    },
    doSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.save()
        }
      })
    },
    save() {
      saveLeave(this.leave).then(res => {
        this.resetForm()
        this.$notify({
          title: '提交成功',
          type: 'success',
          duration: 2500
        })
        this.flowLoading = false
      }).catch(error => {
        this.flowLoading = false
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.leave = { type: '', startTime: '', endTime: '', description: '' }
    },
    findLeave(busId) {
      findLeave(busId).then(res => {
        this.leave = res
      }).catch(error => {
        this.flowLoading = false
      })
    },
    flowSubmit(option) {
      this.flowLoading = true
      finishLeave(this.leave.processInstanceId, this.$route.query.taskDefKey,this.opinion,this.$route.query.taskId,option).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 2500
        })
        this.flowLoading = false
        this.$router.back(-1)
      }).catch(error => {
        this.flowLoading = false
      })
    }
  }
}
</script>
